<template>
  <div class="banner">
    <el-carousel height="400px">
      <el-carousel-item v-for="item in banners.filter(item => type === item.type)" :key="item.id">
        <a :href="'#/' + type + '/Info?id=' + item.id" target="_blank">
          <div class="banner-img" :style="{'background-image': 'url('+item.url+')'}"></div>
        </a>
        <div class="banner-title"></div>
      </el-carousel-item>
    </el-carousel>
  </div>

</template>

<script>
export default {
  name: "Banner",
  props: ["type"],
  data: function () {
    return {
      banners: [
        { type: "Expert", id: 1, title: "何镜堂", url: require("@/assets/banner/expert/HeJingtang.png") },
        { type: "Expert", id: 2, title: "孟建民", url: require("@/assets/banner/expert/MengJianmin.png") },
        { type: "Expert", id: 3, title: "崔愷", url: require("@/assets/banner/expert/CuiKai.png") },
        { type: "Team", id: 78, title: "AECOM", url: require("@/assets/banner/team/AECOM.png") },
        { type: "Team", id: 63, title: "GMP", url: require("@/assets/banner/team/GMP.png") },
        { type: "Team", id: 70, title: "Zaha Hadid Architects", url: require("@/assets/banner/team/ZahaHadidArchitects.png")},
      ],
    };
  },
}
</script>

<style scoped>
.banner {
  width: 100%;
  background-size: cover;
  overflow: hidden;
  transition: all 0.3s ease 0s;
}
.banner-img {
  height: 100%;
  background-size: cover;
  background-position: 50%;
}
.banner-title {
  color: #fff;
  font-size: 36px;
  position: absolute;
  padding-top: 10px;
  padding-bottom: 20px;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(31, 45, 61, 0.3);
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(odd) {
  background-color: #d3dce6;
}
</style>